<template>
  <div class="toast" v-show="isNone">
    <div class="toastItem flex-n-center pd-10-15 border-r boxS-i-4 bg-f">
      <div>
        <img class="1" :src="imgSrc" alt="">
      </div>
      <div class="flex-1 text-c font-f-ib fontW-b color-0">
        <!-- loading -->
        <p v-if="toastType == 0">{{langType == 'zh'? '正在执行···':'Executing...'}}</p>
        <!-- 保存成功 -->
        <p v-else-if="toastType == 1">{{langType == 'zh'? '保存成功':'Saved successfully'}}</p>
        <!-- 操作成功 -->
        <p v-else-if="toastType == 2">{{langType == 'zh'? '操作成功':'Operation succeeded'}}</p>
        <!-- 链接钱包 -->
        <p v-else-if="toastType == 3">{{langType == 'zh'? '正在链接钱包···':'Connecting wallet...'}}</p>
        <!-- 操作失败 -->
        <p v-else-if="toastType == 4">{{langType == 'zh'? '操作失败···请重试':'Operation failed...please try again'}}</p>
        <!-- 链接超时 -->
        <p v-else>{{langType == 'zh'? '连接超时···请重试':'Connection timed out...please try again'}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '默认信息',
      isNone: false,
      toastType: 0,
      langType: localStorage.getItem('language'),
      typeFaileUrl: require('../../assets/icon/tfaile.svg'),
      typeLoadingUrl: require('../../assets/icon/tloading.svg'),
      typeSuccessUrl: require('../../assets/icon/tsuccess.svg'),
      imgSrc: ''
    }
  },
  methods: {
    // type:0,3 loading 1,2 success 4,5 faile
    show (type, duration = 1500) { // 默认参数
      this.toastType = type
      switch (type) {
        case 0:
        case 3:
          this.imgSrc = this.typeLoadingUrl
          break
        case 1:
        case 2:
          this.imgSrc = this.typeSuccessUrl
          break
        default:
          this.imgSrc = this.typeFaileUrl
          break
      }
      this.isNone = true
      setTimeout(() => { // 用定时器实现弹窗出现时间
        this.isNone = false
        this.message = 'Loading'
        var paras = document.getElementsByClassName('toast')
        // console.log(paras)
        if (paras.length > 0) {
          document.body.removeChild(paras[0])
        }
      }, duration)
    }
  }
}
</script>

<style scoped>
  .toast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
  }
  .toastItem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    transform: translate(-50%, -50%);
    z-index: 999;
    font-size: 26px;
  }
</style>
